<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人作品集 - Python开发者</title>
    <link rel="stylesheet" href="styles.css">
    <script src="languages.js" defer></script>
</head>
<body>
    <header>
        <h1>个人作品集</h1>
        <nav>
            <ul>
                <li><a href="#about">关于我</a></li>
                <li><a href="#timeline">专业经历</a></li>
                <li><a href="#projects">项目作品</a></li>
                <li><a href="#contact">联系方式</a></li>
            </ul>
        </nav>
        <div class="language-switcher">
            <button class="lang-btn" data-lang="zh">中文</button>
            <button class="lang-btn" data-lang="en">English</button>
        </div>
    </header>

    <main>
        <section id="about">
            <h2>关于我</h2>
            <div class="about-content">
                <img src="https://img2.baidu.com/it/u=2459326114,334199854&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800" alt="个人照片" class="profile-img">
                <div class="about-text">
                    <p><strong>Python Developer</strong>，擅长消息中间件、实时数据处理、高可用架构设计。拥有丰富的后端开发经验，专注于构建高性能、可扩展的系统架构。</p>
                    <p>喜欢间谍过家家、幸运星、孤独摇滚、摇曳露营等优秀动漫作品，将二次元文化中的创意与技术创新相结合。</p>
                    <p>通过这个网站，我希望能够展示我的技术能力，同时分享对二次元文化的热爱，与志同道合的朋友交流学习。</p>
                </div>
            </div>
            
            <!-- 技能标签 -->
            <div class="skills-section">
                <h3>技能专长</h3>
                <div class="skills-container">
                    <div class="skill-tag expert">Python</div>
                    <div class="skill-tag expert">MongoDB</div>
                    <div class="skill-tag proficient">Next.js</div>
                    <div class="skill-tag proficient">ElasticSearch</div>
                    <div class="skill-tag beginner">Rust</div>
                </div>
            </div>
            
            <!-- 个人成就 -->
            <div class="achievements-section">
                <h3>个人成就</h3>
                <div class="achievements-container">
                    <div class="achievement-item">
                        <div class="achievement-icon">🏆</div>
                        <div class="achievement-text">
                            <h4>清华大学优秀毕业生</h4>
                            <p>2014年本科毕业，获得优秀毕业生荣誉称号</p>
                        </div>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-icon">💎</div>
                        <div class="achievement-text">
                            <h4>微软MVP</h4>
                            <p>微软最有价值专家，在技术社区贡献突出</p>
                        </div>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-icon">🔧</div>
                        <div class="achievement-text">
                            <h4>华为开发者认证</h4>
                            <p>华为云开发者认证专家</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 专业经历时间线 -->
        <section id="timeline">
            <h2>专业经历</h2>
            <div class="timeline-container">
                <div class="timeline-item">
                    <div class="timeline-date">2010-2014</div>
                    <div class="timeline-content">
                        <h3>清华大学</h3>
                        <p>本科学习，获得计算机科学与技术学士学位</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-date">2014-2016</div>
                    <div class="timeline-content">
                        <h3>斯坦福大学</h3>
                        <p>硕士学习，获得计算机科学硕士学位</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-date">2017-2020</div>
                    <div class="timeline-content">
                        <h3>Google</h3>
                        <p>软件工程师，负责分布式系统开发和架构设计</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-date">2021-2023</div>
                    <div class="timeline-content">
                        <h3>OpenAI</h3>
                        <p>软件工程师，参与AI系统开发和优化</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="projects">
            <h2>项目作品</h2>
            <div class="project-grid">
                <div class="project-item">
                    <img src="https://img.xjh.me/random_img.php?type=acg&ctype=acg2&return=302" alt="二次元角色插画" class="project-img">
                    <h3>二次元角色设计集</h3>
                    <p>这是一系列原创的二次元角色设计作品，每个角色都有独特的设定和背景故事。作品融合了传统日式绘画风格与现代数字艺术技术，展现了丰富多样的角色魅力。</p>
                </div>
                <div class="project-item">
                    <img src="https://img.xjh.me/random_img.php?type=acg&ctype=acg3&return=302" alt="二次元场景设计" class="project-img">
                    <h3>二次元场景设计</h3>
                    <p>这是一系列精心设计的二次元场景作品，包括幻想城市、神秘森林、未来都市等多种主题。每个场景都注重细节表现和氛围营造，展现了丰富的想象力。</p>
                </div>
                <div class="project-item">
                    <img src="https://img.xjh.me/random_img.php?type=acg&ctype=acg4&return=302" alt="二次元主题UI设计" class="project-img">
                    <h3>二次元主题UI设计</h3>
                    <p>设计了一系列以二次元为主题的UI界面，包括移动应用、网页和游戏界面等。UI风格融合了动漫元素与现代设计理念，既美观又实用。</p>
                </div>
                <div class="project-item">
                    <img src="https://img.xjh.me/random_img.php?type=acg&ctype=acg9&return=302" alt="二次元计算器插画" class="project-img calculator-image" id="calculator-image">
                    <!-- 计算器弹出窗口 -->
                    <div class="calculator-popup" id="calculator-popup">
                        <div class="calculator-popup-content">
                            <div class="calculator-popup-header">
                                <h4>简易计算器</h4>
                                <button class="calculator-popup-close" id="calculator-popup-close">×</button>
                            </div>
                            <div class="calculator">
                                <div class="calculator-display" id="calculator-display">0</div>
                                <div class="calculator-buttons">
                                    <button class="calculator-button operation" data-operation="divide">÷</button>
                                    <button class="calculator-button operation" data-operation="multiply">×</button>
                                    <button class="calculator-button operation" data-operation="subtract">−</button>
                                    <button class="calculator-button operation" data-operation="add">+</button>
                                    <button class="calculator-button" data-number="7">7</button>
                                    <button class="calculator-button" data-number="8">8</button>
                                    <button class="calculator-button" data-number="9">9</button>
                                    <button class="calculator-button operation" data-operation="modulo">%</button>
                                    <button class="calculator-button" data-number="4">4</button>
                                    <button class="calculator-button" data-number="5">5</button>
                                    <button class="calculator-button" data-number="6">6</button>
                                    <button class="calculator-button equal" data-operation="equal">=</button>
                                    <button class="calculator-button" data-number="1">1</button>
                                    <button class="calculator-button" data-number="2">2</button>
                                    <button class="calculator-button" data-number="3">3</button>
                                    <button class="calculator-button clear" data-operation="clear">C</button>
                                    <button class="calculator-button zero" data-number="0">0</button>
                                    <button class="calculator-button" data-number=".">.</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h3>简易计算器开发</h3>
                    <p>这是一个具有基本功能的简易计算器，支持加减乘除四则运算、取余操作、归0功能，以及实时显示计算结果。</p>
                </div>
            </div>
        </section>

        <section id="gallery">
            <h2>二次元作品集</h2>
            <div class="gallery-grid">
                <img src="https://img.xjh.me/random_img.php?type=acg&ctype=acg5&return=302" alt="二次元风景画" class="gallery-img">
                <img src="https://img.xjh.me/random_img.php?type=acg&ctype=acg6&return=302" alt="二次元角色壁纸" class="gallery-img">
                <img src="https://img.xjh.me/random_img.php?type=acg&ctype=acg7&return=302" alt="二次元同人插画" class="gallery-img">
                <img src="https://img.xjh.me/random_img.php?type=acg&ctype=acg8&return=302" alt="二次元创意插画" class="gallery-img">
            </div>
        </section>

        <section id="contact">
            <h2>联系方式</h2>
            <div class="contact-form">
                <p>如果你也热爱二次元文化，或者对我的作品感兴趣，欢迎随时联系我！无论是交流创作心得，还是洽谈合作事宜，我都很乐意听取你的想法。</p>
                
                <!-- 联系表单 -->
                <form id="contact-form" class="contact-form-container">
                    <div class="form-group">
                        <label for="name">姓名：</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱：</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">留言：</label>
                        <textarea id="message" name="message" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="submit-button">发送消息</button>
                </form>
                
                <!-- 联系信息 -->
                <div class="contact-info">
                    <p><strong>个人网页：</strong><a href="https://kirineko.github.io" target="_blank">https://kirineko.github.io</a></p>
                    <p><strong>邮箱：</strong><a href="mailto:kirineko@qq.com">kirineko@qq.com</a></p>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 二次元作品集. 保留所有权利。</p>
    </footer>

    <script src="main.js"></script>
</body>
</html>